<template>
  <div class="product-detail">
    <p class="title">Description :</p>
    <p>
      <el-divider></el-divider>
    </p>
    <!--    <p class="sub-title">Tuya Bluetooth Remote Control Fingerprint Lock</p>-->

    <!--    <p class="sub-title">Specifications:</p>-->

    <!--    <p class="text">Material: Zinc alloy</p>-->
    <!--    <p class="text">-->
    <!--      Unlock mode: Fingerprint / Password/Tuya APP ( bluetooth ) / Mechanical-->
    <!--      Key-->
    <!--    </p>-->
    <!--    <p class="text">Fingerprint Capacity: 120</p>-->
    <!--    <p class="text">Password capacity : 150</p>-->
    <!--    <p class="text">Fingerprint read: semiconductor sensor</p>-->
    <!--    <p class="text">Read time: z0.3s</p>-->
    <!--    <p class="text">Working power: 4x AAA battery ( Not included )</p>-->
    <!--    <p class="text">Operating temperature: -20 to 60c</p>-->
    <!--    <p class="text">Suit for the door thickness about 35-55mm</p>-->
    <!--    <p class="text">With USB charyge port for emergency</p>-->
    <!--    <p class="text">Application : Wooden Door /Metal Door</p>-->
    <!--    <div class="images">-->
    <!--      <el-image-->
    <!--        v-for="(file, index) in productFiles"-->
    <!--        :key="index"-->
    <!--        :src="file"-->
    <!--        :preview-src-list="[file]"-->
    <!--        class="image"-->
    <!--      ></el-image>-->
    <!--    </div>-->
    <p class="describe" v-html="productData.description"></p>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref } from 'vue'
// 示例数据，实际开发中应该通过props传入
const props = defineProps({
  productData: {
    type: Object,
    required: true
  }
})

const productFiles = ref(props.productData.productImages ?? [])
</script>

<style lang="scss" scoped>
.product-detail {
  font-family: Arial, sans-serif;
  padding-left: 40px;
  padding-right: 40px;

  .title {
    font-size: 22px;
    font-weight: 600;
    /* line-height: 30.8px; */
    height: 20px;
    padding-top: 20px;
  }

  .sub-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 34.2px;
  }

  .text {
    font-size: 18px;
    font-weight: 400;
    line-height: 34.2px;
  }

  .describe {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 100px;
  }
}
</style>
